// 导入three.js
// 掌握gsap设置各种动画效果
import * as THREE from "three"
// 目标 使用控制器 查看3d
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
// 掌握gsap 设置各种动画效果
// 导入动画库
import gsap from "gsap"
// 导入dat.gui
import * as dat from 'dat.gui';

const gui = new dat.GUI();
// 1 创建场景 
const scene = new THREE.Scene()
    // 2 创建相机 PerspectiveCamera透视相机 近端0.1 远端1000
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)
    //添加物体
    // 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1, 3, 3, 3);
// 材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: "#93ebe1" });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 修改物体的位置
// cube.position.set(5,0,0)  x yz
// cube.position.x = 2
// cube.position.z = 1
// cube.position.y = 3

// 设置物体缩放
// 场景添加几何体
console.log("几何体", cube);
// 旋转几何体
cube.rotation.set(Math.PI / 4, 0, 0)
scene.add(cube);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();

gui.add(cube.position, "x").min(0).max(20).step(0.1).name("x轴").onChange((val) => {
    if (val === 20 - 3) alert("快拖到最大值")
}).onFinishChange((val) => {
    console.log("结束了");
});
gui.add(cube.position, "y").min(0).max(20).step(0.1).name("y轴");
gui.add(cube.position, "z").min(0).max(20).step(0.1).name("z轴");
// 修改物体的颜色
const params = {
        "color": "#eb93da",
        fn: () => {
            // 让立方体运动起来
            gsap.to(cube.position, {
                x: 5,
                // delay: 1, //延迟几秒运动
                repeat: -1, //重复的次数 无限次循环-1
                // 往返运动
                yoyo: true,
                duration: 4,
                ease: "power3.inOut",
                onComplete: () => {
                    console.log("动画完成");
                },
                onStart: () => {
                    console.log("开始");
                }
            })
            gsap.to(cube.rotation, { x: 10 * Math.PI, yoyo: true, duration: 4, ease: "power5.inOut", repeat: -1, })
        }
    }
    // gui.addColor(params, "color").name("可选颜色").onChange((val) => {
    //         console.log("值被修改", val);
    //         cube.material.color.set(val)
    //     })
    // gui.add(cube, "visible").name("是否展示") 也可以写到folder下面

// 设置按钮点击触发某个事件
// gui.add(params, "fn").name("点击物体运动")
const folder = gui.addFolder("设置立方体")
folder.add(cube.material, "wireframe").name("线框")
folder.add(cube, "visible").name("是否展示")
folder.add(params, "fn").name("点击物体运动")
folder.addColor(params, "color").name("可选颜色").onChange((val) => {
    console.log("值被修改", val);
    cube.material.color.set(val)
})

// 设置渲染的尺寸大小 
renderer.setSize(window.innerWidth, window.innerHeight)
console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
    // 使用渲染器 通过相机将场景渲染出来
renderer.render(scene, camera)
    // 添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 创建 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
    // 添加控制器阻尼 必须在动画循环里调用controls.update() 当.enableDamping设置为true的时候，阻尼惯性有多大。 Default is 0.05.
    // 请注意，要使得这一值生效，你必须在你的动画循环里调用.update()。
controls.enableDamping = true
controls.dampingFactor = 0.03
    // 每一帧渲染
    // Clock控制时间对象
    // 设置时钟
const clock = new THREE.Clock()
    // 设置动画
    // const animate1 = gsap.to(cube.position, {
    //     x: 5,
    //     delay: 1, //延迟几秒运动
    //     repeat: -1, //重复的次数 无限次循环-1
    //     // 往返运动
    //     yoyo: true,
    //     duration: 4,
    //     ease: "power3.inOut",
    //     onComplete: () => {
    //         console.log("动画完成");
    //     },
    //     onStart: () => {
    //         console.log("开始");
    //     }
    // })
window.addEventListener("dblclick", () => {
        // console.log(animate1);
        // // 判断是否运动状态 双击暂停或者继续
        // if (animate1.isActive()) {
        //     animate1.pause()
        // } else {
        //     animate1.resume()
        // }
        // 双击控制屏幕进入全屏 退出全屏

        const fullScreen = document.fullscreenElement
        if (!fullScreen) {
            // 画布全屏用 renderer.domElement.requestFullscreen()
            renderer.domElement.requestFullscreen()
        } else {
            // 退出全屏是用文档 退出 
            document.exitFullscreen()
        }

    })
    // gsap.to(cube.rotation, { x: 10 * Math.PI, yoyo: true, duration: 4, ease: "power5.inOut", repeat: -1, })
    // gsap.gra repeat重复

function render() {
    controls.update()
    renderer.render(scene, camera);
    requestAnimationFrame(render)

}
render()
    // 监听画面变化 更新渲染画面
window.addEventListener("resize", () => {
    console.log("画面变化了");
    // 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix();
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置的渲染器的像素比例
    renderer.setPixelRatio(window.devicePixelRatio)
})